<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-30 17:27:51
 * @LastEditTime: 2021-07-30 17:30:13
 * @Description: demo
-->
<template>
  <section>
    <div>{{ count }}</div>
    <NButton type="primary" ghost>Primary</NButton>
    <div style="width: 500px">
      <n-carousel show-arrow>
        <img class="carousel-img" src="https://s.anw.red/fav/1623979004.jpg!/fw/600/quality/77/ignore-error/true" />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623372884.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623177220.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
      </n-carousel>
    </div>
    <n-button color="#8a2be2">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #8a2be2
    </n-button>
    <n-button color="#ff69b4">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #ff69b4
    </n-button>
    <n-button ghost color="#8a2be2">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #8a2be2
    </n-button>
    <n-button ghost color="#ff69b4">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #ff69b4
    </n-button>
    <n-button text color="#8a2be2">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #8a2be2
    </n-button>
    <n-button text color="#ff69b4">
      <template #icon>
        <n-icon>
          <cash-icon />
        </n-icon>
      </template>
      #ff69b4
    </n-button>
  </section>
</template>
<script>
import { useRouter } from 'vue-router';
import { computed, ref, h } from 'vue';
import { useStore } from 'vuex';
import {
  CashOutline as CashIcon,
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon
} from '@vicons/ionicons5';

import {
  NButton,
  NSpace,
  NIcon,
  NSwitch,
  NLayoutSider,
  NMenu,
  NLayoutHeader,
  NLayout,
  NLayoutFooter,
  NCarousel
} from 'naive-ui';
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const menuOptions = [
  {
    label: '且听风吟',
    key: 'hear-the-wind-sing',
    icon: renderIcon(BookIcon)
  },
  {
    label: '1973年的弹珠玩具',
    key: 'pinball-1973',
    icon: renderIcon(BookIcon),
    disabled: true,
    children: [
      {
        label: '鼠',
        key: 'rat'
      }
    ]
  },
  {
    label: '寻羊冒险记',
    key: 'a-wild-sheep-chase',
    disabled: true,
    icon: renderIcon(BookIcon)
  },
  {
    label: '舞，舞，舞',
    key: 'dance-dance-dance',
    icon: renderIcon(BookIcon),
    children: [
      {
        type: 'group',
        label: '人物',
        key: 'people',
        children: [
          {
            label: '叙事者',
            key: 'narrator',
            icon: renderIcon(PersonIcon)
          },
          {
            label: '羊男',
            key: 'sheep-man',
            icon: renderIcon(PersonIcon)
          }
        ]
      },
      {
        label: '饮品',
        key: 'beverage',
        icon: renderIcon(WineIcon),
        children: [
          {
            label: '威士忌',
            key: 'whisky'
          }
        ]
      },
      {
        label: '食物',
        key: 'food',
        children: [
          {
            label: '三明治',
            key: 'sandwich'
          }
        ]
      },
      {
        label: '过去增多，未来减少',
        key: 'the-past-increases-the-future-recedes'
      }
    ]
  },
  {
    label: '舞，舞，舞',
    key: 'dance-dance-dance',
    icon: renderIcon(BookIcon),
    children: [
      {
        type: 'group',
        label: '人物',
        key: 'people',
        children: [
          {
            label: '叙事者',
            key: 'narrator',
            icon: renderIcon(PersonIcon)
          },
          {
            label: '羊男',
            key: 'sheep-man',
            icon: renderIcon(PersonIcon)
          }
        ]
      },
      {
        label: '饮品',
        key: 'beverage',
        icon: renderIcon(WineIcon),
        children: [
          {
            label: '威士忌',
            key: 'whisky'
          }
        ]
      },
      {
        label: '食物',
        key: 'food',
        children: [
          {
            label: '三明治',
            key: 'sandwich'
          }
        ]
      },
      {
        label: '过去增多，未来减少',
        key: 'the-past-increases-the-future-recedes'
      }
    ]
  }
];

export default {
  setup() {
    const store = useStore();
    const route = useRouter();
    setTimeout(() => {
      store.commit('increment/add');
      store.dispatch('increment/add');
    }, 2000);
    /**
     * 主题切换
     */
    const switchTheme = () => {
      console.log(123);
      store.commit('increment/switchTheme');
    };
    /**
     * 返回
     */
    const onBack = () => {
      route.push('/');
    };
    return {
      count: computed(() => store.state.increment.count),
      inverted: ref(false),
      menuOptions,
      switchTheme,
      onBack
    };
  },
  components: {
    NButton,
    NSpace,
    NSwitch,
    NLayoutSider,
    NMenu,
    NLayout,
    NLayoutHeader,
    NLayoutFooter,
    NCarousel,
    CashIcon,
    BookIcon,
    PersonIcon,
    WineIcon,
    NIcon
  }
};
</script>
